<template>
  <a-card title="角色权限管理" style="width: 100%">
    <el-table
      :data="role_data"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="ID" width="88" align="center">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="role_name" label="角色" width="555">
      </el-table-column>
      <el-table-column prop="title" label="关联管理员" width="333">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <div v-if="scope.row.id != 1">
            <el-button @click="updateClick(scope.row)" type="primary"
              >编辑/权限</el-button
            >
            <el-button type="danger" @click="delete_role(scope.row.id)"
              >删除</el-button
            >
          </div>
          <div v-else>超级管理员不允许修改</div>
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
      <div
        style="margin-top: 1.5%; display: flex; justify-content: space-between"
      >
        <el-button type="primary" @click="role_add()">添加</el-button>
        <el-pagination
          background
          :total="role_data.length"
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[5, 10, 15, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-config-provider>
  </a-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "@vue/runtime-core";
import axios from "axios";
import { useRouter } from "vue-router";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from "element-plus";

//获取角色数据
const role_data = ref([]);
const role = async () => {
  var { data } = await axios.get("http://localhost:5200/roles");

  role_data.value = data;
};
//分页
let locale = ref(zhCn); //显示中文
const currentPage4 = ref(1); //当前页数
const pageSize4 = ref(5); // 每页显示多少条
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
//添加按钮
const router = useRouter();
const role_add = () => {
  router.push("/sys/admin/roleAdd");
};
//编辑按钮
const updateClick = (row: any) => {
  router.push({path:"/sys/admin/roleUpdate",query:{id:row.id}});
};
//删除数据
const delete_role = async (id: any) => {
  ElMessageBox.confirm(`此操作将永久删除id为${id}数据, 是否继续?`, "提示", {
    confirmButtonText: "确实删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await axios.delete(`http://localhost:5200/roles/${id}`);
      if (res.status == 200) {
        ElMessage({
          type: "success",
          message: `ID为${id} 删除成功！`,
        });
        role();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: `ID为${id} 已取消删除~`,
      });
    });
};
onMounted(() => {
  role();
});
</script>

<style lang="scss" scoped></style>
